<template>
    <div class="pi-container">
        <div class="banner">
            <img src="../../../assets/images/AboutUS/banner.png" alt="">
        </div>
        <div class="list">
            <div class="item item1">
                <img src="../../../assets/images/AboutUS/kuai.png" alt="">
                <h3 style="color: #5070FF;">快</h3>
                <p>相较传统招商尽调至少花费1周 基至数周时间出批告，招商慧眼<span>可在1-2天生成报告，节约90% 以上的时间。</span></p>
            </div>
            <div class="item item2">
                <img src="../../../assets/images/AboutUS/zhun.png" alt="">
                <h3 style="color: #28C6D5;">准</h3>
                <p>相比传统招商尽调线下访谈、 调阅文档等形式，无法规避信 息和数据虚假问题，招商慧眼平台<span>应用财务、电力、供应链 等多维度数据，更加全面客观。</span></p>
            </div>
            <div class="item item3">
                <img src="../../../assets/images/AboutUS/te.png" alt="">
                <h3 style="color: #5237FF;">特</h3>
                <p>依托相比多数企业尽调报告，仅有工商数据等“大路货”数据，招商慧眼平台通过严谨的数据应用授权，权威可靠的数据来源，<span>可提供企业用电、纳税及供应链采销等特色数据。</span></p>
            </div>
            <div class="item item4">
                <img src="../../../assets/images/AboutUS/xin.png" alt="">
                <h3 style="color: #5070FF;">新</h3>
                <p>依托公司强大的研发能力招商慧眼产品 <span>应用国际前沿的人工智能AI大模型技术，大数据技术等技术，</span> 实时分析行业最新报告和市场动态，在技术和行业信息上，走在前治</p>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue" 

</script>

<style lang="less" scoped>

.pi-container{
    background: #fff;
    height:calc(100vh - 70px);
    .banner{
        img{
            width: 100%;
        }
    }
    .list{
        background: #fff;
        display: flex;
        .item{
            flex: 1;
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            margin: 40px;
            margin-left: 0;
            margin-top: 60px;
            position: relative;
            padding: 20px;
            border-radius: 10px;
            img{
                width: 150px;
                position: absolute;
                right: 20px;
                top: -40px;
            }
            h3{
                font-size: 40px;
                color: #202020;
            }
            p{
                margin-top: 20px;
                font-size: 16px;
                color: #202020;
                line-height: 40px;
                span{
                    font-size: 18px;
                    font-weight: 700;
                }
            }
        }
        .item:nth-child(1){
            margin-left: 40px;
        }
        .item1{
            background: linear-gradient(#d1e3ff, #ffffff);
        }
        .item2{
            background: linear-gradient(#ceeef8, #ffffff);
        }
        .item3{
            background: linear-gradient(#e5e2f8, #ffffff);
        }
        .item4{
            background: linear-gradient(#d1e3ff, #ffffff);
        }
    }
}

</style>